<template>
  <div class="all">
    <header class="header">
      <a href="javascript:history.back(-1);" class="iconfont icon-left back"></a>
      <ul class="header_tab">
        <li class="header_tab_item current_header_tab_item">商品</li>
        <li class="header_tab_item">详情</li>
      </ul>
    </header>
    <main class="main">
      <div class="content_warp">
        <div class="content_warp_img">
          <img :src="`${baseUrl + form.imgs}`" alt />
        </div>
        <div class="content_warp_content">
          <div class="content_warp_contentbox">
            <div class="content_warp_contentbox_title">
              <p>{{form.title}}</p>
              <span>{{form.vertion}}</span>
            </div>
            <div class="content_warp_contentbox_price">
              <div class="price">
                <span>参考价</span>
                <i>&nbsp;&nbsp;￥&nbsp;</i>
                <span>{{form.price}}</span>
              </div>
              <div class="tip">
                <span class="iconfont icon-icon_xinxitishi"></span>
                <p>具体成交价格根据商品参加活动或会员使用优惠券、积分等发生变化，最终以各渠道订单结算页价格为准</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="product_koubei_praise">
        <div class="product_koubei_praise_title">
          <div>
            <p>用户口碑（27）</p>
          </div>
          <div>
            <span>好评度&nbsp;</span>
            <i>100%</i>
          </div>
        </div>
        <div class="product_koubei_praise_user">
          <ul>
            <li class="praise_user">
              <div class="praise_user_title">
                <div class="user_name">快***i</div>
                <ul class="user_star">
                  <li class="iconfont icon-wujiaoxingxingxingshoucangmoren"></li>
                  <li class="iconfont icon-wujiaoxingxingxingshoucangmoren"></li>
                  <li class="iconfont icon-wujiaoxingxingxingshoucangmoren"></li>
                  <li class="iconfont icon-wujiaoxingxingxingshoucangmoren"></li>
                  <li class="iconfont icon-wujiaoxingxingxingshoucangmoren"></li>
                </ul>
              </div>
              <div class="praise_user_comment">冰箱高大上，这回够用了，送货的师傅态度相当好。</div>
              <div class="praise_user_pic">
                <div class="modelNo">
                  <span>{{form.title}}</span>
                  <i>2019-11-23 15:13:15</i>
                </div>
                <a href="javascript:;" class="more">
                  <span>查看更多</span>
                  <i class="iconfont icon-right"></i>
                </a>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="product_recommene">
        <div class="recommene_title">
          <p>产品推荐</p>
        </div>
        <div class="recommend_content">
          <div class="recommend_content_tab">
            <ul>
              <li class="current_recommend_content_tab">
                <p>相似产品</p>
              </li>
              <li>
                <p>周边产品</p>
              </li>
              <li>
                <p>猜你喜欢</p>
              </li>
            </ul>
          </div>
          <div class="recommend_content_tab_content">
            <div class="showbox">
              <ul>
                <li>
                  <a href>
                    <div class="lb_box">
                      <img :src="`${baseUrl + form.imgs}`" alt />
                      <div class="img_name">
                        <p>{{form.title}}</p>
                        <span>{{form.vertion}}</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href>
                    <div class="lb_box">
                      <img :src="`${baseUrl + form.imgs}`" alt />
                      <div class="img_name">
                        <p>{{form.title}}</p>
                        <span>{{form.vertion}}</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href>
                    <div class="lb_box">
                      <img :src="`${baseUrl + form.imgs}`" alt />
                      <div class="img_name">
                        <p>{{form.title}}</p>
                        <span>{{form.vertion}}</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href>
                    <div class="lb_box">
                      <img :src="`${baseUrl + form.imgs}`" alt />
                      <div class="img_name">
                        <p>{{form.title}}</p>
                        <span>{{form.vertion}}</span>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
            <a href="javascript:;" class="more">
              <span>查看更多</span>
              <i class="iconfont icon-right"></i>
            </a>
          </div>
        </div>
      </div>
    </main>
    <div class="all-footer">
      <div class="warp">
        <div class="warp_top">
          <div class="wp">
            <span>
              Haier 全球网站群 ·
              <a href="https://www.haier.com/cn/public/changecountry/">中国</a>
            </span>
          </div>
        </div>
        <div class="warp_bottom">
          <a href="https://www.haier.com/about_haier/haiererpinpai/ppjj/?(none)">关于海尔</a>
          <i>|</i>
          <a href="https://www.haier.com/cn/terms_conditions/">法律声明</a>
          <i>|</i>
          <a href="https://www.haier.com/contact/">联系我们</a>
          <i>|</i>
          <a href="https://www.haier.com/help/">帮助中心</a>
          <i>|</i>
          <a href="https://www.haier.com/store.shtml">海尔门店</a>
        </div>
      </div>
    </div>
    <footer class="footer">
      <div class="footer_content">
        <div class="home">
          <a href>
            <i class="iconfont icon-shouye"></i>
            <p>首页</p>
          </a>
        </div>
        <div class="collection">
          <i class="iconfont icon-shoucang2"></i>
          <p>收藏</p>
        </div>
        <div class="btn_group">
          <div class="online" @click="goCart">立即购买</div>
          <div class="online" @click="addCart">加入购物车</div>
        </div>
      </div>
    </footer>
    <div class="back-top" @click="backTop">
      <img src="../assets/img/phone-productlist6.png" alt />
    </div>
  </div>
</template>

<script>
import { getMsg } from "../utils/product";
import { setCart } from "../utils/cart";
export default {
  data() {
    return {
      baseUrl: "http://localhost:2468/uploads/",
      form: getMsg() || {}
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  methods: {
    backTop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    scrollToTop() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop.toFixed(0) * 1 > 450) {
        let backTop = document.getElementsByClassName("back-top")[0];
        backTop.style.display = "flex";
      } else {
        let backTop = document.getElementsByClassName("back-top")[0];
        backTop.style.display = "none";
      }
    },
    goCart() {
      console.log(this.form);
      window.removeEventListener("scroll", this.scrollToTop);
      setCart(this.form);
      this.$router.push({ path: "/cart" });
    },
    addCart() {
      window.removeEventListener("scroll", this.scrollToTop);
      setCart(this.form);
      this.$router.go(-1);
    }
  }
};
</script>

<style>
body {
  margin: 0;
}
</style>

<style scoped src="@/assets/css/detail.css">
</style>